<style scoped lang="scss">
.main {
  justify-content: space-between;

  > div {
    border-radius: 4px;
  }
}
</style>

<template>
  <div class="admin_page">
    <admin-header></admin-header>
    <admin-side-bar></admin-side-bar>
    <admin-container>
      <div class="main flex">
        <div class="flex0 pt15 pb15 pl15 pr15 bg_fff width30">
          <el-button type="text" size="mini" @click="add">
            添加
          </el-button>
          <el-tree
            :data="menuList"
            accordion
            :props="{ label: 'name' }"
            node-key="id"
            :expand-on-click-node="false"
          >
            <span slot-scope="{ node, data }" class="flex flex1 aic">
              <span class="fs14 flex1">{{ node.label }}</span>
              <span class="flex0">
                <el-button type="text" size="mini" @click="add(data)">
                  添加子菜单
                </el-button>
                <el-button type="text" size="mini" @click="update(data)">
                  修改
                </el-button>
                <el-button type="text" size="mini" @click="remove(data)">
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="flex0 pt15 pb15 pl15 pr15 bg_fff width68">
          <el-form ref="form" size="mini" :model="form" label-width="80px">
            <el-form-item label="菜单名称">
              <el-input
                v-model="form.name"
                placeholder="请输入菜单名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="上级">
              <el-select v-model="form.fid" filterable placeholder="请选择上级">
                <el-option
                  v-for="(item, idx) in fids"
                  :key="idx"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item label="链接">
                  <el-input
                    v-model="form.url"
                    placeholder="请输入链接"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="图标">
                  <el-input
                    v-model="form.icon"
                    placeholder="请输入图标"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排序">
                  <el-input
                    v-model="form.sort"
                    placeholder="按从小到大排序"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="appLoading" @click="sub"
                >提交
              </el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </admin-container>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import AdminHeader from "../../../components/admin/header";
import AdminSideBar from "../../../components/admin/side-bar";
import AdminContainer from "../../../components/admin/container";
import { actionsTypes, stateTypes } from "../../../store/admin";
import { AppLoadingMixin } from "../../../lib/mixins/app-loading";
import { getMenuListFromTree } from "../../../lib/utils";
import { FIELDS } from "../../../lib/tables/admin_menu";

export default {
  name: "Menu",
  components: { AdminContainer, AdminSideBar, AdminHeader },
  mixins: [AppLoadingMixin],
  data() {
    const form = {};
    FIELDS.forEach(r => {
      form[r] = null;
    });
    return {
      form,
      currMenuId: ""
    };
  },
  computed: {
    ...mapState("admin", [stateTypes.menuList]),
    fids() {
      let fids = getMenuListFromTree(this[stateTypes.menuList]);
      fids = [{ name: "顶级", id: 0 }].concat(fids);
      fids = fids.map(r => {
        if (r.id === this.currMenuId) r.disabled = true;
        return r;
      });
      return fids;
    }
  },
  created() {},
  methods: {
    ...mapActions("admin", [actionsTypes.getMenuList]),
    update(data) {
      this.currMenuId = data.id;
      FIELDS.forEach(r => {
        this.$set(this.form, r, data[r]);
      });
    },
    remove(data) {
      if (data.children && data.children.length)
        return this.$message.error("请先删除子菜单");
      this.$confirm("是否删除菜单 " + data.name).then(async () => {
        if (await this.$adminService.menuDel(data.id))
          this[actionsTypes.getMenuList]();
      });
    },
    add(data) {
      this.currMenuId = "";
      FIELDS.forEach(r => {
        this.$set(this.form, r, null);
      });
      if (data && data.id) {
        this.form.fid = data.id;
      }
    },
    async sub() {
      const form = { ...this.form };
      let c;
      if (this.currMenuId) {
        c = await this.$adminService.menuUpdate(form);
      } else c = await this.$adminService.menuAdd(form);
      if (c) {
        this[actionsTypes.getMenuList]();
      }
    }
  }
};
</script>
